<template>
	<div class="login-page">
		<div id="particles"></div>
		<div class="login-form">
			
			 
			<div class="login-title" >
			 <div class="title">柯一后台管理系统</div>
			 <el-divider></el-divider>
			 <p class="">梦想开始的地方</p>
			 <p class="">与你携手共进</p>
			</div>
			
			 <el-form :model="loginForm" class="login-elform"  ref="loginForm" label-position="left" label-width="0px">
			 	<el-form-item prop="username">
			 		<el-input  v-model="loginForm.username" prefix-icon="el-icon-user-solid" placeholder="登录账号"></el-input>
			 	</el-form-item>
			 	<el-form-item prop="password">
			 		<el-input v-model="loginForm.password" type="password" prefix-icon="fa fa-lock" placeholder="登录密码"></el-input>
			 	</el-form-item>
			 	<el-form-item prop="code">
			 		<el-row>
			 			<el-col :span="14">
			              <el-input v-model="loginForm.code"  prefix-icon="fa fa-lock" placeholder="验证码"></el-input>
			 			</el-col>	
			 			<el-col :span="9" style="float: right;line-height: 0;">
			              <img style="width: 100%; height: 40px;border-radius: 5px;" class="pointer" :src="loginForm.src" @click="refreshCaptcha()" />
			 			</el-col>	
			 		</el-row>
			 		
			 	</el-form-item>
			 	<el-form-item >
			 		
			        <el-button type="primary" style="width:100%;"  @click.native.prevent="login('loginForm')"  >登 录</el-button>
			    </el-form-item>
			 </el-form>
			
			
			
		</div>
	</div>
</template>

<script>
	var _self;
	const baseUrl =  process.env.VUE_APP_BASE_API;
	import particles from 'particles.js'
	import particlesJson from '@/assets/particles/particles.json'
	export default{
		data(){
			return{
				loginForm:{
					username:"admins",
					src:'',
					password:"he201391",
					code:""
				},
				redirect: undefined
			}
		},
		mounted: function() {
			particlesJS('particles',particlesJson);
		},
		created(){
			_self = this;
			_self.refreshCaptcha()
		},
		methods:{
			refreshCaptcha: function(){
			   _self.loginForm.src = baseUrl+ "/login/getCodeImg?t=" + new Date().getTime();
			},
			login:function(){
				
			    _self.$store.dispatch("Login",_self.loginForm).then(()=>{
					_self.$router.push({path:_self.redirect || "/"})
				}).catch(()=>{
					_self.refreshCaptcha();
				})
			
				
			}
		}
	}
</script>

<style lang="scss">
	.login-page{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: url(../assets/img/login-bj.jpg);
		background-size: 100% 100%;
		#particles{
			position: absolute;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50% 50%;
			z-index: 2;
		}
		.login-form{
	       position: absolute;
	       width: 100%;
	       height: 100%;
	       z-index: 3;
	       display: flex;
	       align-items: center;
	       justify-content: center;
		   .login-elform{
		   	width: 300px;
		   	padding: 20px;
		   	background:rgba(0, 0,0,0.5);
		   	border-radius: 5px;
		   }
		   .login-title{
		   	width: 200px;
		   	height: 150px;
		   	background:#007aff;
		   	padding: 30px;
		   	border-radius: 5px 0 0 5px;
		   	
		   }
		   .login-title p{
		   	color: #FFFFFF;
		   }
		   .title{
		   	font-size: 20px;
		   	color: #fff;
		   }
	    }
	}
</style>
